<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
            <el-form-item label="参数名称" prop="paramName">
                <el-input v-model="queryParams.paramName" placeholder="请输入参数名称" clearable size="small" style="width: 240px"
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="参数类型" prop="paramType">
                <el-select v-model="queryParams.paramType" clearable placeholder="请选择" style="width: 240px">
                    <el-option v-for="item in typeList" :key="item" :label="item" :value="item">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button v-preventReClick type="primary" icon="el-icon-search" size="mini"
                    @click="handleQuery">搜索</el-button>
                <el-button v-preventReClick icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="roleList" class="margin-top">
            <el-table-column label="参数类型" prop="paramType" :show-overflow-tooltip="true" />
            <el-table-column label="参数名称" prop="paramName" :show-overflow-tooltip="true" />
            <el-table-column label="参数编码" prop="paramCode" :show-overflow-tooltip="true" />
            <el-table-column label="参数描述" prop="paramDesc" width="250" :show-overflow-tooltip="true" />
            <el-table-column label="参数值" :show-overflow-tooltip="true" width="160" >
                <template v-slot="scope">
                    <div>
                        {{ paramValueFilter(scope.row.paramValue) }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" prop="createTime" :formatter="$util.YYMM" width="180" />
            <el-table-column label="创建人" prop="creator" width="150" />
            <el-table-column label="操作" align="center" fixed="right" width="200" class-name="small-padding fixed-width">
                <template v-slot="scope">
                    <div>
                        <el-button v-preventReClick size="mini" type="text" @click="handleView(scope.row)">编辑</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
            @pagination="getList" />


        <el-dialog title="编辑" :visible.sync="open" width="40%" append-to-body>

            <template v-if="viewStatus == 1">
                <div class="dialogtitle">内部用户/机构签署意愿方式</div>
                <el-checkbox-group v-model="checkList">
                    <el-checkbox label="签署密码"></el-checkbox>
                    <el-checkbox label="手机号-验证码"></el-checkbox>
                    <el-checkbox label="邮箱-验证码"></el-checkbox>
                </el-checkbox-group>
            </template>
            <template v-else-if="viewStatus == 2">
                <div class="dialogtitle">内部企业证书算法类型</div>
                <el-checkbox-group v-model="checkList">
                    <el-checkbox label="RSA"></el-checkbox>
                    <el-checkbox label="SM2"></el-checkbox>
                </el-checkbox-group>
            </template>
            <template v-else-if="viewStatus == 3">
                <div class="dialogtitle">内部个人证书算法类型</div>
                <el-checkbox-group v-model="checkList">
                    <el-checkbox label="RSA"></el-checkbox>
                    <el-checkbox label="SM2"></el-checkbox>
                </el-checkbox-group>
            </template>
            <div slot="footer" class="dialog-footer">
                <el-button v-preventReClick type="primary" @click="submitForm">确 定</el-button>
                <el-button v-preventReClick @click="open = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
  
<script>
import {
    paramList, paramEdit, paramTypeList
} from "@/api/system/views";


export default {
    components: {
    },
    name: "UserGroupRole",
    data() {
        return {
            open: false,
            rowObj: {},
            viewStatus: 1,
            checkList: [],
            // 遮罩层
            loading: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            roleList: [],

            typeList: [],

            // 查询参数
            queryParams: {
                pageNo: 1,
                pageSize: 10,
                paramName: undefined,
                paramType: undefined
            },
        };
    },
    created() {
        this.getList();
        this.getTypeList();
    },
    methods: {
        getTypeList() {
            paramTypeList(this.queryParams).then(
                response => {
                    this.typeList = response.data;
                }
            ).catch(err => this.loading = false)
        },
        getList() {
            this.loading = true;
            paramList(this.queryParams).then(
                response => {
                    this.roleList = response.data.list;
                    this.total = response.data.total;
                    this.loading = false;
                }
            ).catch(err => this.loading = false)


        },
        async submitForm() {
            if(!this.checkList||this.checkList.length <1){
                this.$modal.msgError('不能为空'); return
            }
            let arr = JSON.parse(this.rowObj.paramValue)
            arr = arr.map(match=>{
                if(this.checkList.includes(match.title)){
                    match.selected = 1
                }else{
                    match.selected = 0
                }
                return match
            })
            this.rowObj.paramValue = JSON.stringify(arr)

            // arr = [{
            //     key: 1,title: '签署密码',selected: 1
            // },{
            //     key: 2,title: '手机号-验证码',selected: 0
            // },{
            //     key: 3,title: '邮箱-验证码',selected: 1
            // },]

            


            let res = await paramEdit(this.rowObj)
            if (res.code == 0) {
                this.open = false
                this.$modal.msgSuccess("编辑成功");
                this.getList()
            }
        },
        handleView(row) {
            this.rowObj = row
            this.viewStatus = row.id
            let arr = JSON.parse(row.paramValue)
            this.checkList = [];
            arr.map(mat => {
                if (mat.selected) {
                    this.checkList.push(mat.title)
                }
            })
            console.log(JSON.parse(row.paramValue), '==')
            this.open = true
            // this.$refs.ViewUserDialog.init(id)
        },
        paramValueFilter(val) {
            let arr = JSON.parse(val)
            let str = '';
            arr.map(mat=>{
                if(mat.selected){
                    str = str+mat.title+'、'
                }
            })
            str = str.slice(0,str.length-1)
            return str

        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNo = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
    }
};
</script>
<style lang="scss">
.dialogtitle {
    height: 40px;
    line-height: 40px;
}
</style>
  